<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import type { Thesaurus } from "@/type/index.d";
import GlobalCard from "@/components/GlobalCard.vue";
import axios from "../../utils/axios";

const list = ref<Thesaurus>({
	chinese: "",
	pinyin: "",
	definition: "",
	synonym: "", // 近义词
	opposite: "", // 反义词
	example: "",
});
const changeEvent = () => {
	getData();
};
const getData = async () => {
	try {
		const result = await axios.get<Thesaurus>("/random-thesaurus");
		list.value = result.data || {};
	} catch (error) {
		console.log("🚀 ~ getData ~ error:", error);
	}
};
onLoad(getData);
</script>

<template>
	<view class="root-container root">
		<GlobalCard :list="list">
			<text class="button-text" @click="changeEvent">换一个</text>
		</GlobalCard>
	</view>
</template>

<style scoped>
.root-container {
	overflow: hidden;
	padding: 20px;
}
</style>
